React Vercel 배포

✒️ 2025-05-26 14:46 내용 수정

• 참고 자료 : 김채운's Etc Vercel로 React 프로젝트 배포하기
• 팀 프로젝트의 배포를 진행하던 중, AWS EC2에서 클라이언트와 서버를 동시에 배포하려 했으나 메모리 문제로 인해 클라이언트를 Vercel로 배포하기로 결정했다.
• 공식 사이트 : https://vercel.com/

Git repository 설정

1. 먼저 git repository를 설정하기 위해 github에서 private repository를 만든다.

2. VSC 터미널에서 github에 올릴 폴더 위치로 들어간 후, git 설정을 진행한다.

• 새 repository를 만들면 터미널에서 설정하는 방법도 알려준다.
  

# git repository initialize
git init

# branch 생성
git branch -M main

# github 원격 주소와 로컬 git 연결
git remote add origin https://github.com/사용자/repository이름

3. 새 branch에 변경 내용들을 staging하기 전에 .gitignore 파일을 생성해서 제외할 파일들을 설정한다.
   • /node_modules 폴더나 기타 중요 파일(.env)들을 제외해야 한다.
   • Vercel에서 배포 시 npm install을 실행해서 의존성 패키지를 설치하기 때문에 /node_modules는 필요가 없다.

.gitignore
/node_modules

4. git 폴더의 구조가 아래처럼 되어 있는지 확인한다.
   • Vercel에 배포 시 git repository가 프로젝트의 root 폴더가 되도록 설정해야 오류가 발생하지 않는다.

5. .gitignore 설정이 완료되었다면 git에 올릴 내용을 staging 하고 commit을 생성한 뒤 push를 진행한다.
   • 만약 사용자 인증을 진행한다면 먼저 git 이름을 작성하고, 비밀번호는 Token을 입력한다.
     • Token은 github에서 우측 프로필 사진을 누르고, Settings-Developer settings-Personal access tokens-Token(classic)에서 생성할 수 있다.

# git branch에 추가할 내용 staging
# git add . 는 현재 위치의 모든 파일을 staging
# 이 단계를 수행하기 전에 .gitignore 파일을 생성해서 react의 경우 node_modules와 같은 폴더를 제외하도록 설정해야 한다.
git add .

# commit 추가 - commit을 안하고 push하면 github에 내용이 없음
git commit -m "initial commit"

# 로컬 git branch를 원격으로 push
git push -u origin main

Vercel에서 설정

1. 이제 Vercel 사이트에 접속해서 계정이 없다면 가입을 진행하고 import git repository를 선택한다.

   • 화면은 이미 다른 project에서 사용했던 것을 재활용한 장면이고, 보통 계정 생성 시 바로 떴던 것으로 기억한다.
     

2. 배포할 repository의 import 버튼을 누른다.

   • github과 vercel이 연동되지 않았다면 install vercel 버튼을 눌러 연동해준다.

3. project 설정을 진행한다.
   • root directory는 만약 현재 프로젝트 root 디렉터리를 다르게 설정한다면 편집해준다.
   • build 옵션에서 react 명령어대로 npm run build로 설정하고, 다른 명령어를 사용한다면 해당 명령어로 수정한다.
   • output directory는 npm run build로 생성되는 /build로 설정한다.
   • install command는 의존성 패키지 설치를 위해 npm install로 설정한다.

4. 배포가 완료되면 화려하게 알려준다.
   • 배포 진행 중 에러가 발생하면 build log를 열어서 어느 부분에서 에러가 생겼는지 확인 후 수정하면 된다.

5. 왼쪽에 배포된 사이트 화면을 누르면 배포가 완료된 사이트로 들어갈 수 있다.
   • 도메인은 Vercel에서 지정된 도메인으로 되어 있어서 나중에 새 도메인으로 수정할 땐 프로젝트 설정에서 변경하면 된다.

• 배포와 관련된 설정은 프로젝트에서 Deployment에서 확인할 수 있다.

• 만약 프로젝트의 Deployment를 모두 지우면 같은 프로젝트에서 새 Deployment 추가가 안되서 프로젝트 자체를 다시 만들어야 하므로 주의해야 한다.
  • 배포 기본 설정은 연동된 git repository의 branch에 새 commit이 들어올 때마다 다시 Redeploy이 되므로 수정사항이 있다면 git repository에 새 commit을 추가하는 것이 좋다.
  • 다만 개인 테스트 결과 commit 내용이 바로 업데이트 안 된 상태에서 Reploy 되는 경우도 있어서 이런 경우엔 프로젝트를 다시 생성해서 진행했다.